<template>
  <div style="height: 100%;" ref="echart">
  </div>
</template>
<script>
  import echarts from 'echarts'
  export default {
    props: {
      chartData: {
        type: Object,
        default() {
          return {
            xData: [],
            series: []
          }
        }
      },
      isAxisChart: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        // 这里为什么需要用return呢    因为如果用data等于一个对象的话，那么其他data值都变成这个了所以需要用return
        echart: null,
        axisOption: {
          legend: {  //图标上方悬浮着的那个东西
            textStyle: {
              color: '#333'
            }
          },
          grid: {
            left: '15%'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {    //x轴数据
            type: 'category',
            data: [],
            axisLine: {   //轴体颜色
              lineStyle: {
                color: '#17b3a3'
              }
            },
            axisLabel: {   //轴体字体颜色
              color: '#333'
            }
          },
          yAxis: {   //y轴数据
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#17b3a3'
              }
            }
          },
          color: [
            '#2ec7c9',
            '#b6a2de',
            '#5ab1ef',
            '#ffb980',
            '#d87a80',
            '#8d98b3',
            '#e5cf0d',
            '#97b552',
            '#95706d',
            '#dc69aa',
            '#07a2a4',
            '#9a7fd1',
            '#588dd5',
            '#f5994e',
            '#c05050',
            '#59678c',
            '#c9ab00',
            '#7eb00a',
            '#6f5553',
            '#c14089'
          ],
          series: []
        },
        normalOption: {
          tooltip: {
            trigger: 'item'
          },
          color: ['#0f78f4', '#dd536b', '#9462e5', '#a6a6a6', '#e1bb22', '#39c362', '#3ed1cf'],
          series: [],
        },
      }
    },
    computed: {
      options() {  //判断渲染什么类型的图标
        return this.isAxisChart ? this.axisOption : this.normalOption
      },
      isCollapse() {    //获取折叠展开的状态   计算属性会自动在属性发生变化的时候从新计算下值    所以是动态获取的
        return this.$store.state.tab.isCollapse
      }
    },
    watch: {
      chartData: {   //监听chartData数据发生变化的时候会执行一下代码
        handler: function () {
          this.initChart()
        },
        deep: true    //表示深度监听    就是一般用于监听对象里面的属性
      },
      isCollapse() {   //监听计算属性isCollapse      因为是计算“属性” 所以是可以监听的
        setTimeout(() => {
          this.resizeChart()
        }, 300)
      }
    },
    methods: {
      initChart() {     //初始化实例
        this.initChartData()
        if (this.echart) {  //值为null或者''   则条件不成立   执行else语句
          this.echart.setOption(this.options)    //实例这个对象
        } else {
          this.echart = echarts.init(this.$refs.echart)     //初始化
          this.echart.setOption(this.options)
        }
      },
      initChartData() {     //父组件穿过来的数据赋值给自己
        if (this.isAxisChart) {
          this.axisOption.xAxis.data = this.chartData.xData
          this.axisOption.series = this.chartData.series
        } else {
          this.normalOption.series = this.chartData.series
        }
      },
      resizeChart() {
        this.echart ? this.echart.resize() : ''  //当echart值为空的时候不做任何操作    当上面初始化完成有数据的时候调用resize这个接口方法
      }
    },
    mounted() {
      window.addEventListener('resize', this.resizeChart)   //监听resize事件   当窗口大小发生改变的时候执行
    },
    destroyed() {    //在组件销毁的时候同时把这个事件销毁    这里为什么要销毁呢？
      window.removeEventListener('resize', this.resizeChart)    //第一个参数是事件名，第二个要销毁的函数
    },
  }
</script>
<style>

</style>